{% extends 'xadmin/base.html' %}

{% load staticfiles %}
{% load node_tag %}

{% block title %}
    栏目管理
{% endblock %}

{% block css %}
    <link href="{% static 'xadmin/css/plugins/toastr/toastr.min.css' %}" rel="stylesheet">
    <link href="{% static 'xadmin/layui/css/layui.css' %}" rel="stylesheet">
    <link href="https://cdn.bootcss.com/jquery-treetable/3.2.0/css/jquery.treetable.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/jquery-treetable/3.2.0/css/jquery.treetable.theme.default.css" rel="stylesheet">
{% endblock %}

{% block style %}
    <style>
        .label-info {
                background-color: #999999;
        }
        {#.wrapper-content {#}
        {#    padding-top:0!important;#}
        {#}#}
        .btn-row {
            padding-left:15px;
        }
        #nestable2 .dd-item .pull-right i {
            font-size: 22px;
            margin-right: 10px;
            cursor: pointer;
        }
        #nestable2 .dd-item .pull-right .edit{
            color: #f7a246;
        }
        #nestable2 .dd-item .pull-right .del{
            color: #ed5565;
        }
        #nestable2 .dd-item .pull-right .moveup{
            color: #1ab394;
        }
        #nestable2 .dd-item .pull-right .movedown{
            color: #1ab394;
            margin-right: 100px;
        }
        .dd-handle {
            cursor: default!important;
        }
        h2 {
            margin-top:20px;
        }
        .btn{
            width: 60px;
        }
        table#table-tree thead tr th {
                border:none;

            }
            .layui-table td, .layui-table th{
                line-height: 37px;
            }
            table#table-tree{
                border:none;
            }
    </style>

{% endblock %}



{% block main %}
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row btn-row">
            <button type="button" class="btn btn-outline btn-default btn-xs col-lg-1" data-action="expand-all" id="expand-all">展开所有</button>
            <button type="button" class="btn btn-outline btn-default btn-xs col-lg-1" data-action="collapse-all" id="collapse-all">收起所有</button>
            <button type="button" class="btn btn-xs btn-outline btn-primary col-lg-1 col-lg-offset-8" onclick="window.location.href='{% url 'nodeadd' %}?siteid={{ siteid }}'">添加栏目</button>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="layui-card-body">
                    <table class="layui-table layui-form" id="table-tree">
                        <thead>
                            <tr>
                                <th style="width:5%;">
                                    <input type="checkbox" lay-filter="checkall" lay-skin="primary" value="0" />
                                </th>
                                <th>名称</th>
                                <th>标识</th>
                                <th>类型</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for n in node_list %}
                            <tr data-tt-id="{{ n.id }}" data-tt-parent-id="{{ n.parent_node_id }}">
                                <td style="width:5%;">
                                    <input type="checkbox" name="" class="ckbox" value="{{ n.id }}" lay-skin="primary"/>
                                </td>
                                <td>{{ n.name }}</td>
                                <td>{{ n.index_name | default_if_none:"" }}</td>
                                <td>{{ n.get_node_type_display | default_if_none:"" }}</td>
                                <td>
                                    <a href="javascript:;" nid="{{ n.id }}" class="layui-btn layui-btn-primary layui-btn-xs moveup">上移</a>
                                    <a href="javascript:;" nid="{{ n.id }}" class="layui-btn layui-btn-primary layui-btn-xs movedown">下移</a>
                                    <a href="{% url 'nodeedit' n.id %}?siteid={{ siteid }}" class="layui-btn layui-btn-xs">编辑</a>
                                    <a href="javascript:;" nid="{{ n.id }}" class="delbtn layui-btn layui-btn-xs layui-btn-danger">删除</a>
                                </td>
                            </tr>

                        {% endfor %}

                        </tbody>

                    </table>
                </div>

            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script src="{% static 'xadmin/js/plugins/nestable/jquery.nestable.js' %}"></script>
    <script src="{% static 'xadmin/layui/layui.all.js' %}"></script>
    <script src="https://cdn.bootcss.com/jquery-treetable/3.2.0/jquery.treetable.js"></script>

    <script>
        $(document).ready(function () {
            $("#table-tree").treetable({
                expandable: true,  //显示展开收起的小箭头
                //collapseAll: true,
                column: 1,
            });

            //$('#nestable2').nestable({
            //    allowDrag: false,
            //})

            $('#expand-all').click(function(){
                $('#table-tree').treetable("expandAll", true);
            });
            $('#collapse-all').click(function(){
                $('#table-tree').treetable("collapseAll", true);
            });
            //展开所有
            $('#expand-all').click();



            $('.dd-handle .edit').click(function(){
                var nodeid = $(this).attr('id');
                window.location.href = '/admin/node/edit/' + nodeid + '/?siteid=' + {{ siteid }};
            });

            $('.delbtn').click(function(){
                var nodeid = $(this).attr('nid');
                console.log(nodeid);
                layer.confirm('删除栏目会连同子栏目一起删除, 是否继续?', function(index){
                  //do something
                  $.ajax({
                      url:  '{% url "nodedel"%}',
                      type: 'post',
                      dataType: 'json',
                      data: {'nodeid': nodeid, 'csrfmiddlewaretoken': '{{ csrf_token }}'},
                      success: function(rec){
                          if(rec.code == '200'){
                              layer.msg(rec.message, {time: 2000}, function(){
                                  window.location.reload();
                              })
                          }else{
                              layer.alert(rec.message, {icon: 2})
                          }
                      }
                  });
                  layer.close(index);
                });
            });

            //上移
            $('.moveup').click(function(){
                var parent = $(this).parent().parent();
                var parentid = parent.attr('data-tt-parent-id');

                var prev_bro = parent.prevAll('tr[data-tt-parent-id="'+ parentid + '"]');

                if(prev_bro.length > 0){
                    var id = parent.attr('data-tt-id'); //自己ID
                    $.ajax({
                        url: '{% url "nodemove" %}',
                        type: 'post',
                        dataType: 'json',
                        data: {'id': id, 'act': 'moveup', 'csrfmiddlewaretoken': '{{ csrf_token }}'},
                        success: function(bk){
                            if(bk.status == '200'){
                                window.location.reload();
                            }else{
                                layer.alert(bk.msg, {icon: 2});
                            }
                        }
                    })
                }else{
                    layer.alert('已经在顶部了..', {icon: 3});
                }
            });
            //下移
            $('.movedown').click(function(){
                var parent = $(this).parent().parent();
                var parentid = parent.attr('data-tt-parent-id');

                var prev_bro = parent.prevAll('tr[data-tt-parent-id="'+ parentid + '"]');

                if(prev_bro.length > 0){
                    var id = parent.attr('data-tt-id'); //自己ID
                    $.ajax({
                        url: '{% url "nodemove" %}',
                        type: 'post',
                        dataType: 'json',
                        data: {'id': id, 'act': 'movedown', 'csrfmiddlewaretoken': '{{ csrf_token }}'},
                        success: function(bk){
                            if(bk.status == '200'){
                                window.location.reload();
                            }else{
                                layer.alert(bk.msg, {icon: 2});
                            }
                        }
                    })
                }else{
                    layer.alert('已经在顶部了..', {icon: 3});
                }
            });

        });




        layui.use(['form'], function () {
            var form = layui.form;
            form.on('checkbox(checkall)', function (data) {
                //console.log(data.elem.checked); //是否被选中，true或者false
                var input_list = $('.ckbox');
                if (data.elem.checked) {
                    input_list.prop("checked", true);
                } else {
                    input_list.prop("checked", false);
                }
                form.render();  //重新渲染表单
            });
        })
    </script>
{% endblock %}